<template>
	<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
		<a-row :gutter="24" :span="12">
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="上级菜单" prop="parentId">
					<a-tree-select
						show-search
						style="width: 100%"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						placeholder="请选择上级菜单"
						allow-clear
						tree-default-expand-all
					>
						<a-icon slot="suffixIcon" type="smile" />
						<a-tree-select-node key="0-1" value="若依科技" title="若依科技">
							<a-tree-select-node key="0-1-1" value="深圳总公司" title="深圳总公司">
								<a-tree-select-node key="random" value="研发部门" title="研发部门" />
								<a-tree-select-node key="random1" value="市场部门" title="市场部门" />
								<a-tree-select-node key="random2" value="测试部门" title="测试部门" />
								<a-tree-select-node key="random3" value="财务部门" title="财务部门" />
								<a-tree-select-node key="random4" value="运维部门" title="运维部门" />
							</a-tree-select-node>
							<a-tree-select-node key="0-1-2" value="长沙分公司" title="长沙分公司">
								<a-tree-select-node key="random1" value="市场部" title="市场部">
									<a-tree-select-node key="random3" value="财务部" title="财务部"></a-tree-select-node>
								</a-tree-select-node>
							</a-tree-select-node>
						</a-tree-select-node>
					</a-tree-select>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="菜单类型" prop="menuType">
					<a-radio-group
						v-decorator="['menuType', { rules: [{ required: true, message: '请选择菜单类型' }] }]"
						placeholder="请选择菜单名称"
						@change="onChange"
					>
						<a-radio :value="0"> 目录 </a-radio>
						<a-radio :value="1"> 菜单</a-radio>
						<a-radio :value="2"> 按钮</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="菜单名称" prop="menuName">
					<a-input v-decorator="['menuName', { rules: [{ required: true, message: '请输入菜单名称' }] }]" placeholder="请选择菜单名称"> </a-input>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="请求地址" prop="path">
					<a-select v-decorator="['path', { rules: [{}] }]" placeholder="" @change="handleSelectChange">
						<a-select-option value="Ordinary"> 普通角色 </a-select-option>
					</a-select>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="打卡方式" prop="path">
					<a-select v-decorator="['path', { rules: [{}] }]" placeholder="" @change="handleSelectChange">
						<a-select-option value="Ordinary"> 普通角色 </a-select-option>
					</a-select>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="菜单图标">
					<a-tree-select
						show-search
						style="width: 100%"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						placeholder="请选择菜单图标"
						allow-clear
						tree-default-expand-all
					>
						<a-icon slot="suffixIcon" type="smile" />
						<a-tree-select-node key="0-1" value="若依科技" title="若依科技">
							<a-tree-select-node key="0-1-1" value="深圳总公司" title="深圳总公司">
								<a-tree-select-node key="random" value="研发部门" title="研发部门" />
								<a-tree-select-node key="random1" value="市场部门" title="市场部门" />
								<a-tree-select-node key="random2" value="测试部门" title="测试部门" />
								<a-tree-select-node key="random3" value="财务部门" title="财务部门" />
								<a-tree-select-node key="random4" value="运维部门" title="运维部门" />
							</a-tree-select-node>
							<a-tree-select-node key="0-1-2" value="长沙分公司" title="长沙分公司">
								<a-tree-select-node key="random1" value="市场部" title="市场部">
									<a-tree-select-node key="random3" value="财务部" title="财务部"></a-tree-select-node>
								</a-tree-select-node>
							</a-tree-select-node>
						</a-tree-select-node>
					</a-tree-select>
				</a-form-item>
			</a-col>
		</a-row>

		<a-row :gutter="24" :span="12">
			<a-col :span="12" :wrapper="16">
				<a-form-item label="是否外链" prop="isFrame">
					<a-radio-group @change="onChange">
						<a-radio :value="1"> 是 </a-radio>
						<a-radio :value="2"> 否</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24">
			<a-col :span="12" :wrapper="11">
				<a-form-item label="显示状态" prop="perms">
					<a-radio-group @change="onChange">
						<a-radio :value="3"> 显示 </a-radio>
						<a-radio :value="4"> 隐藏</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-col>
			<a-col :span="10" :wrapper="8">
				<a-form-item label="菜单状态" prop="status">
					<a-radio-group @change="onChange">
						<a-radio :value="5"> 正常 </a-radio>
						<a-radio :value="6"> 停用</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-col>
		</a-row>
		<a-form-item :wrapper-col="{ span: 24, offset: 10 }">
			<a-button type="primary" html-type="submit"> 提交 </a-button>
		</a-form-item>
		<!-- <a-form-item :wrapper-col="{ span: 12 }">
			<a-button type="primary" html-type="submit"> Submit </a-button>
			<a-button type="primary" html-type="submit"> Submit </a-button>
		</a-form-item> -->
	</a-form>
</template>

<script>
export default {
	data() {
		return {
			value: 1,
			// value: undefined,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, { name: 'coordinated' }),
		};
	},
	methods: {
		// 状态选择
		onChange(e) {
			console.log('radio checked', e.target.value);
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
				}
			});
		},
		handleSelectChange(value) {
			console.log(value);
			// this.form.setFieldsValue({
			// 	note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
			// });
		},
	},
};
</script>
